<template>
	<view class="movie-section">
		<view class="detail-title">
			<view class="detail-box">
				<image :src="datalist.pic" mode=""></image>
			</view>
			<view class="detail-main">
				<view class="flex-box">
					<view class="detail-main-title">
						{{ datalist.filmName }}
					</view>
					<view class="detail-main-text">
						共{{ datalist.duration }}分钟
					</view>
				</view>
				<view class="flex-box">
					<view class="detail-main-picker">
						评分：<text class="text-red">{{ datalist.score }}</text>
					</view>
					<view class="detail-main-text detail-main-picker">
						{{ datalist.publishDate }}上映
					</view>
				</view>
				<view class="cinema-tags">
					<text class="tag" v-for="(item, index) in datalist.filmTypes" :key="index">{{ item }}</text>
				</view>
				<view class="cinema-tags">
					<text class="tag bg">{{ datalist.version[0] }}</text>
				</view>
			</view>
		</view>
		<!-- 顶部搜索区 -->
		<view class="search-header">
			<!-- <view class="city-select" @tap="selectCity">
				<image class="search-icon" :src="static_url + '/static/img/address.png'"></image>
				<text>{{ selectedCity }}</text>
			</view>
			<view class="" @click="allBtn">
				<text>{{allCity}}</text>
				<text class="arrow">▼</text>
			</view> -->
			<view class="selected-city">
				<uni-data-picker :localdata="items" :border="false" :placeholder="regiondata || '请选择城市'"
					@change="regionchange" ref="picker"></uni-data-picker>
			</view>
			<view class="search-box">
				<image class="search-icon" src="/static/img/search.png"></image>
				<input type="text" @input="onSearchBlur" v-model="searchKey" placeholder="搜索影院"
					placeholder-class="placeholder" />
			</view>
		</view>

		<!-- 影院列表 -->
		<scroll-view class="cinema-list" scroll-y>
			<view class="" v-if="filteredCinema.length > 0">
				<view class="cinema-item" v-for="(item, index) in filteredCinema" :key="index" @tap="goToCinema(item)">
					<view class="cinema-info">
						<view class="cinema-name">{{ item.name }}</view>
						<view class="cinema-address">{{ item.address }}</view>
					</view>
					<view class="cinema-distance">{{ item.distance }}</view>
				</view>
			</view>
			<view class="" v-else>
				<nodata></nodata>
			</view>
		</scroll-view>


	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			items: [],
			regiondata: '',
			searchKey: "",
			cinemaList: [],
			filteredCinema: [],
			datalist: [],
			pagenum: 1,
			loading: false,
			isload: false,
			longitude: null,
			latitude: null,
			opt: {}
		}
	},

	onLoad(opt) {
		if (opt) {
			this.opt = opt
			this.regiondata = uni.getStorageSync('city')
			this.getDetail()
			this.getCinema()

		}
		var that = this;
		app.get('Index/getCustom', {}, function (customs) {
			var url = app.globalData.static_url + '/static/area.json';
			uni.request({
				url: url,
				data: {},
				method: 'GET',
				header: {
					'content-type': 'application/json'
				},
				success: function (res2) {
					that.items = res2.data
				}
			});
		});

	},
	onPullDownRefresh: function () {
		this.getCinema()
	},
	onReachBottom() {
		this.getCinema(this.pagenum + 1)
	},

	methods: {
		regionchange(e) {
			const value = e.detail.value
			console.log(value[0].text + ',' + value[1].text + ',' + value[2].text);
			this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text;
			uni.setStorageSync('city', this.regiondata)
			const city = value[1].text; // 获取选中的市
			const area = value[2].text; // 获取选中的区
			uni.setStorageSync('cityName', city); // 将城市信息存储到本地
			uni.setStorageSync('areaName', area); // 将区域信息存储到本地

			// 切换城市和区域后，重新请求影院数据
			this.getCinema(); // 重新加载第一页的数据
		},
		goToCinema(item) {
			uni.navigateTo({
				url: `/pagesZone/movie/cinema-detail?cinemaId=${item.id}&filmName=${this.datalist.filmName}`
			})
		},
		onSearchBlur() {
			const cityName = uni.getStorageSync('cityName')
			const areaName = uni.getStorageSync('areaName')
			const longitude = uni.getStorageSync('longitude')
			const latitude = uni.getStorageSync('latitude')
			app.get('film/get_cinema', {
				cinemaName: this.searchKey,
				longitude: longitude,
				latitude: latitude,
				cityName: cityName,
				areaName: areaName
			}, (res) => {

				const data = res.data;
				if (res.status === 200) {
					this.filteredCinema = data

				} else {
					app.error(res.mgs)
				}


			});
			// this.filterMovies();
		},
		// 过滤电影列表
		filterMovies() {
			const searchKey = this.searchKey.trim().toLowerCase(); // 获取去除空格并转为小写的搜索关键字
			if (searchKey) {
				this.filteredCinema = this.cinemaList.filter(movie =>
					movie.name?.toLowerCase().includes(searchKey)
				);
			} else {
				this.filteredCinema = this.cinemaList; // 如果搜索框为空，显示所有电影
			}
		},
		getDetail() {
			app.get('film/get_fiml_detail', {
				filmId: this.opt.filmId,
				filmName: this.opt.filmName,
				type: this.opt.type
			}, (res) => {
				this.datalist = res.data
			});
		},
		getCinema(pagenum = 1) {

			this.loading = true;
			app.showLoading('加载中');
			const cityName = uni.getStorageSync('cityName')
			const areaName = uni.getStorageSync('areaName')
			const longitude = uni.getStorageSync('longitude')
			const latitude = uni.getStorageSync('latitude')
			this.pagenum = pagenum;
			app.get('film/get_cinema', {
				page: pagenum,
				limit: 10,
				longitude: longitude,
				latitude: latitude,
				cityName: cityName,
				areaName: areaName
			}, (res) => {
				this.loading = false;
				app.showLoading(false);
				const data = res.data;
				if (res.status === 200) {
					if (pagenum == 1) {
						this.filteredCinema = []
					}
					this.cinemaList = res.data
					this.filteredCinema = this.filteredCinema.concat(res.data);
				}
			});
			this.closeLoading()
		},
		closeLoading() {
			setTimeout(() => {
				app.showLoading(false);
			}, 8000)
		}
	}
}
</script>

<style>
.movie-section {
	background: #fff;
	min-height: 100vh;
}

.detail-title {
	display: flex;
	padding: 40rpx;
	background-image: linear-gradient(#203548, #284058);
}

.flex-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.detail-box {
	width: 150rpx;
	height: 240rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.detail-box image {
	width: 100%;
	height: 100%;
}

.selected-city {
	width: 40%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	display: -webkit-box;

}

.detail-main {
	margin-left: 20rpx;
	color: #fff;
	flex: 1;
}

.detail-main-title {
	color: #FFFFFF;
	font-weight: 700;
	font-size: 32rpx;
}

.detail-star {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.detail-main-picker {
	padding: 20rpx 0;
}

.detail-main-text {
	font-size: 28rpx;
	text-align: right;
}

.search-header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #fff;
	position: relative;
}

.show-city {
	position: absolute;
	left: 0;
	z-index: 999;
	background-color: #fff;
	width: 100%;
	padding: 40rpx;
	display: flex;
	gap: 20rpx;
}

.show-city-item.highlighted {
	border-color: #ff3d5c;
}

.show-city-item {
	padding: 10rpx 20rpx;
	border: 1px solid #eee;
}

.city-select {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
	font-size: 28rpx;
}

.arrow {
	font-size: 20rpx;
	margin-left: 6rpx;
	color: #666;
}

.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	background: #f5f5f5;
	padding: 10rpx 20rpx;
	border-radius: 8rpx;
}

.search-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
}

.placeholder {
	color: #999;
	font-size: 28rpx;
}

.tab-header {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.tab-item.active {
	color: #ff6b81;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: #ff6b81;
}

.movie-list,
.cinema-list {
	padding: 20rpx;
}

.movie-item {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.movie-poster {

	width: 180rpx;
	height: 240rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.movie-poster image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.movie-score {
	color: #999;
	font-size: 24rpx;
	border-radius: 4rpx;
}

.movie-info {
	flex: 1;
	display: flex;
}

.movie-top {
	display: flex;
}

.text-cut {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 10rpx 0;
}

.action-bottom {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.movie-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-right: 10rpx;
}

.movie-star {
	font-size: 26rpx;
	color: #999;

}

.movie-showinfo {
	font-size: 24rpx;
	color: #666;
}

.action-button {
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background: #ff6b81;
	color: #fff;
	font-size: 28rpx;
	border-radius: 30rpx;
	margin-top: 10rpx;
}

.cinema-item {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.cinema-info {
	flex: 1;
	margin-right: 20rpx;
}

.cinema-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.cinema-address {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.cinema-tags {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10rpx;
}

.tag {
	font-size: 22rpx;
	color: #999;
	padding: 4rpx 8rpx;
	border: 1rpx solid #eee;
	border-radius: 4rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}

.cinema-price {
	font-size: 24rpx;
	color: #999;
}

.price {
	color: #ff6b81;
	font-size: 28rpx;
	font-weight: bold;
}

.cinema-distance {
	font-size: 24rpx;
	color: #999;
}

.text-col {
	color: #fe1d38;
}

.movie-sub {
	flex: 1;
	flex-shrink: 0;
	width: 380rpx;
}

.bg-blue {
	background-color: #0081ff;
}

.text-xl {
	background-color: #f0f0f0;
	font-size: 36rpx;
	padding: 10rpx 20rpx;
}

.text-day {
	font-size: 24rpx;
	margin-left: 10rpx;
}

.text-red {
	color: #FE1D38;
}

.cinema-tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10rpx;
}

.tag {
	font-size: 22rpx;
	color: #999;
	padding: 4rpx 8rpx;
	border: 1rpx solid #eee;
	border-radius: 4rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}

.bg {
	background-color: #333;
	color: #fff;
	border: none;
}
</style>